<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>遗产数字化档案管理平台</a-breadcrumb-item>
      <a-breadcrumb-item>档案库管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="ant-row1">
      <a-col :span="4">
        档案名称：
        <a-input placeholder="请输入" v-model="query.archiveName" />
      </a-col>
      <a-col :span="4">
        档案形式：
        <a-input placeholder="请输入" v-model="query.archiveForm" />
      </a-col>
      <a-col :span="8">
        纸质档案存放位置编码：
        <a-input placeholder="请输入" v-model="query.paperStorageCode" />
      </a-col>
      <a-col :span="8">
        入库时间：
        <a-range-picker
          style="width: 330px; margin-left: 10px"
          v-model="dateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="createTime1"
        />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getQuery"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="ant-row1">
      <a-col :span="4">查询表单</a-col>
      <a-col :span="18"></a-col>
      <a-col :span="2">
        <a-button
          type="primary"
          @click="addData"
          v-hasPermi="['yichan:dakgl:add']"
        >
          新建
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-spin :spinning="loading">
          <a-table
            :columns="columns"
            :data-source="data"
            :rowKey="
              (record, index) => {
                return index;
              }
            "
            :pagination="false"
          >
            <span slot="action" slot-scope="text, record">
              <a
                @click="downloadData(record)"
                v-hasPermi="['yichan:dakgl:read']"
                >借阅</a
              >
              <a-divider type="vertical" />
              <a @click="lookData(record)" v-hasPermi="['yichan:dakgl:view']"
                >查看</a
              >
              <a-divider type="vertical" v-if="record.archiveForm == '纸质'" />
              <!-- <a
                v-if="record.archiveForm == '纸质'"
                @click="upData(record)"
                v-hasPermi="['yichan:dakgl:back']"
                class="blue"
                >归还</a
              > -->
              <a-divider type="vertical" />
              <a-popconfirm
                placement="left"
                title="您正在进行删除操作，删除后数据不可恢复，确定删除吗？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="deleteData(record)"
                v-hasPermi="['yichan:dakgl:del']"
                class="red"
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
          <a-pagination
            style="float: right; margin-top: 10px"
            v-model="query.offset"
            show-size-changer
            :total="total"
            :page-size-options="pageSizeOptions"
            :page-size="query.current"
            @change="pageChange"
            @showSizeChange="pageSizeChange"
            :show-total="(total) => `共 ${total} 条`"
          />
        </a-spin>
      </a-col>
      <a-modal v-model="vis" width="35%" title="新增档案" :footer="null">
        <a-form
          :form="form"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 17 }"
          @submit="handleSubmit"
          style="height: 550px; overflow-y: auto"
        >
          <a-form-item label="档案名称">
            <a-input
              placeholder="请输入"
              v-decorator="[
                'newData.archiveName',
                { rules: [{ required: true, message: '请输入档案名称' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="档案类型">
            <a-select
              placeholder="请选择档案类型"
              v-decorator="[
                'newData.archiveType',
                { rules: [{ required: true, message: '请选择档案类型' }] },
              ]"
            >
              <a-select-option
                v-for="(item, index) in yichanTypeList"
                :key="index"
                :value="item.dictValue"
              >
                {{ item.dictLabel }} </a-select-option
              >>
            </a-select>
          </a-form-item>
          <a-form-item label="纸质状态">
            <a-select
              placeholder="请选择纸质状态"
              v-decorator="[
                'newData.paperStatus',
                { rules: [{ required: true, message: '请选择纸质状态' }] },
              ]"
            >
              <a-select-option value="正常"> 正常 </a-select-option>
              <a-select-option value="损坏"> 损坏 </a-select-option>
              <a-select-option value="遗失"> 遗失 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="档案形式">
            <a-select
              placeholder="请选择档案形式"
              v-decorator="[
                'newData.archiveForm',
                { rules: [{ required: true, message: '请选择档案形式' }] },
              ]"
            >
              <a-select-option value="纸质"> 纸质 </a-select-option>
              <a-select-option value="电子"> 电子 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="纸质档案存放位置编码">
            <a-input
              placeholder="请输入"
              v-decorator="[
                'newData.paperStorageCode',
                {
                  rules: [
                    { required: true, message: '请输入纸质档案存放位置编码' },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item label="入库时间">
            <a-date-picker
              placeholder="请输入"
              @change="createTime"
              v-decorator="[
                'newData.entryTime',
                {
                  rules: [
                    { required: true, message: '请输入纸质档案存放位置编码' },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item label="档案数量">
            <a-input
              placeholder="请输入"
              v-decorator="[
                'newData.archiveCount',
                { rules: [{ required: true, message: '请输入档案数量' }] },
              ]"
            />
          </a-form-item>
          <a-form-item label="档案等级">
            <a-select
              placeholder="请选择档案等级"
              v-decorator="[
                'newData.archiveLevel',
                { rules: [{ required: true, message: '请选择档案等级' }] },
              ]"
            >
              <a-select-option value="普通"> 普通 </a-select-option>
              <a-select-option value="机密"> 机密 </a-select-option>
              <a-select-option value="绝密"> 绝密 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="入库经办人">
            <a-input
              placeholder="请输入"
              v-decorator="[
                'newData.entryOperator',
                { rules: [{ required: true, message: '请输入入库经办人' }] },
              ]"
            />
          </a-form-item>
          <a-row>
            <a-col :span="7" style="text-align: right; color: #000"
              >* 上传文件：</a-col
            >
            <a-col :span="17">
              <!-- <a-upload
                name="file"
                :multiple="true"
                :before-upload="handleFileUpload"
                :file-list="fileList"
                :customRequest="submitFile"
                :remove="handleRemove"
              >
                <a-button style="margin-top: -10px">
                  <a-icon type="upload" /> 上传文件
                </a-button>
              </a-upload> -->
              <Upload :imageUrl="exteriorPhotoLink" @getImg="getImgW"></Upload>
            </a-col>
          </a-row>
          <a-form-item :wrapper-col="{ span: 8, offset: 8 }">
            <a-button style="float: left" type="primary" html-type="submit">
              提交
            </a-button>
            <a-button style="float: right" @click="vis = false">
              返回
            </a-button>
          </a-form-item>
        </a-form>
        <!-- <a-row>
                    <a-col :span="24">
                        * 档案名称：<a-input placeholder="请输入" v-model="newData.archiveName" />
                    </a-col>
                    <a-col :span="24">
                        * 纸质名称：<a-select v-model="newData.paperStatus">
                            <a-select-option value="正常">
                                正常
                            </a-select-option>
                            <a-select-option value="损坏">
                                损坏
                            </a-select-option>
                            <a-select-option value="遗失">
                                遗失
                            </a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span="24">
                        * 档案形式：<a-select v-model="newData.archiveForm">
                            <a-select-option value="纸质">
                                纸质
                            </a-select-option>
                            <a-select-option value="电子">
                                电子
                            </a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span="24">
                        * 上传文件：
                        <input id="fileInput" type="file" class="input-button" @change="handleFileUpload">
                        <a-button type="primary" @click="submitFile">
                            上传
                        </a-button>
                    </a-col>
                    <a-col :span="24">
                        * 纸质档案存放位置编码：<a-input placeholder="请输入" v-model="newData.paperStorageCode"
                            style="width: 46%;" />
                    </a-col>
                    <a-col :span="24">
                        * 入库时间： <a-date-picker placeholder="请输入" @change="createTime" />
                    </a-col>
                    <a-col :span="24">
                        * 档案数量：<a-input placeholder="请输入" v-model="newData.archiveCount" />
                    </a-col>
                    <a-col :span="24">
                        * 档案等级：<a-select v-model="newData.archiveLevel">
                            <a-select-option value="普通">
                                普通
                            </a-select-option>
                            <a-select-option value="机密">
                                机密
                            </a-select-option>
                            <a-select-option value="绝密">
                                绝密
                            </a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :span="24">
                        * 入库经办人：<a-input placeholder="请输入" v-model="newData.entryOperator" style="width: 58%;" />
                    </a-col>
                </a-row> -->
      </a-modal>
      <a-drawer
        title="档案详情"
        width="37%"
        placement="right"
        :closable="false"
        :visible="vis1"
        @close="vis1 = false"
      >
        <a-row>
          <a-col :span="4" style="color: #00000080">档案名称：</a-col>
          <a-col :span="7">{{ oldData.archiveName }}</a-col>
          <a-col :span="4" style="color: #00000080">纸质状态</a-col>
          <a-col :span="7">{{ oldData.paperStatus }}</a-col>
          <a-col :span="4" style="color: #00000080">档案形式：</a-col>
          <a-col :span="7">{{ oldData.archiveForm }}</a-col>
          <a-col :span="8" style="color: #00000080"
            >纸质档案存放位置编码：</a-col
          >
          <a-col :span="4">{{ oldData.paperStorageCode }}</a-col>
          <a-col :span="4" style="color: #00000080">入库时间：</a-col>
          <a-col :span="7">{{ oldData.entryTime }}</a-col>
          <a-col :span="4" style="color: #00000080">档案数量：</a-col>
          <a-col :span="7">{{ oldData.archiveCount }}</a-col>
          <a-col :span="4" style="color: #00000080">档案等级：</a-col>
          <a-col :span="7">{{ oldData.archiveLevel }}</a-col>
          <a-col :span="5" style="color: #00000080">入库经办人：</a-col>
          <a-col :span="7">{{ oldData.entryOperator }}</a-col>
          <a-col :span="5" style="color: #00000080">档案类型：</a-col>
          <a-col :span="3">{{ oldData.archiveType }}</a-col>
        </a-row>
      </a-drawer>
    </a-row>
  </div>
</template>
<script>
import Upload from "@/component/upload/index.vue";
import moment from "moment";
const columns = [
  {
    title: "序号",
    dataIndex: "key",
    key: "key",
    align: "center",
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: "档案名称",
    dataIndex: "archiveName",
    key: "archiveName",
  },
  {
    title: "纸质状态",
    dataIndex: "paperStatus",
    key: "paperStatus",
  },
  {
    title: "档案形式",
    dataIndex: "archiveForm",
    key: "archiveForm",
  },
  {
    title: "纸质档案存放位置编码",
    dataIndex: "paperStorageCode",
    key: "paperStorageCode",
  },
  {
    title: "入库时间",
    dataIndex: "entryTime",
    key: "entryTime",
  },
  {
    title: "档案数量",
    dataIndex: "archiveCount",
    key: "archiveCount",
  },
  {
    title: "档案等级",
    dataIndex: "archiveLevel",
    key: "archiveLevel",
  },
  {
    title: "入库经办人",
    dataIndex: "entryOperator",
    key: "entryOperator",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  components: {
    Upload,
  },
  mounted() {
    this.getList();
    this.getDictList();
  },
  data() {
    return {
      exteriorPhotoLink: "",
      button: [],
      data: [],
      columns,
      vis: false,
      vis1: false,
      pageSizeOptions: ["10", "20", "50"],
      total: 0,
      form: this.$form.createForm(this, { name: "coordinated" }),
      query: {
        offset: 1,
        current: 20,
        archiveName: "",
        archiveForm: "",
        paperStorageCode: "",
        startTime: "",
        endTime: "",
        archiveCount: "",
      },
      newData: {
        archiveName: "",
        archiveForm: "",
        archiveCount: "",
        archiveLevel: "",
        archiveUrl: "",
        entryOperator: "",
        entryTime: "",
        paperStatus: "",
        paperStorageCode: "",
        archiveType: "",
      },
      oldData: {},
      file: null,
      fileList: [],
      yichanTypeList: [],
      dateRange: [],
    };
  },

  methods: {
    moment,
    getImgW(url) {
      this.exteriorPhotoLink = url;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const year = values.newData.entryTime._d.getFullYear();
          const month = (values.newData.entryTime._d.getMonth() + 1)
            .toString()
            .padStart(2, "0");
          const day = values.newData.entryTime._d
            .getDate()
            .toString()
            .padStart(2, "0");
          values.newData.entryTime = year + "-" + month + "-" + day;
          values.archiveUrl = this.exteriorPhotoLink;
          var parmas = values.newData;
          this.$axios
            .post("/government-platform-center/archiveManagement", parmas, {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            })
            .then((res) => {
              if (res.data.msg == "success") {
                this.getList();
                this.vis = false;
                this.newData = {
                  archiveName: "",
                  archiveForm: "",
                  archiveCount: "",
                  archiveLevel: "",
                  archiveUrl: "",
                  entryOperator: "",
                  entryTime: "",
                  paperStatus: "",
                  paperStorageCode: "",
                  archiveType: "",
                };
              }
            });
        }
      });
    },
    getQuery() {
      this.query.offset = 1;
      this.getList();
    },
    getDictList() {
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=yichan_code"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.yichanTypeList = res.data.data;
          }
        });
    },
    cleanQuery() {
      this.query = {
        offset: 1,
        current: 20,
        archiveName: "",
        archiveForm: "",
        paperStorageCode: "",
        entryTime: "",
        archiveCount: "",
      };
      this.dateRange = [];
      this.getList();
    },
    getList() {
      this.loading = true;
      var q = "government-platform-center/archiveManagement";
      this.$axios
        .get(q, { params: this.query })
        .then((res) => {
          if (res.data.msg == "success") {
            this.data = res.data.data;
            this.total = res.data.total;
            this.loading = false;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    pageChange(current) {
      this.query.offset = current;
      this.getList();
    },
    pageSizeChange(current, pageSize) {
      this.query.current = pageSize;
      this.query.offset = current;
      this.getList();
    },
    addData() {
      this.vis = true;
    },
    handleOk() {
      var a = 0;
      for (const prop in this.newData) {
        if (this.newData[prop] == "") {
          a++;
        }
      }
      if (a == 0) {
        var parmas = this.newData;
        this.$axios
          .post("/government-platform-center/archiveManagement", parmas, {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
          .then((res) => {
            if (res.data.msg == "success") {
              this.getList();
              this.vis = false;
              this.newData = {
                archiveName: "",
                archiveForm: "",
                archiveCount: "",
                archiveLevel: "",
                archiveUrl: "",
                entryOperator: "",
                entryTime: "",
                paperStatus: "",
                paperStorageCode: "",
                archiveType: "",
              };
            }
          });
      } else {
        this.$message.error("请完善所有必填项");
      }
    },
    createTime(date, dateString) {
      this.newData.entryTime = dateString;
    },
    createTime1(val) {
      this.query.startTime = val[0];
      this.query.endTime = val[1];
    },
    handleFileUpload(event, _) {
      this.file = event;
      this.fileList.push(event);
    },
    handleRemove(file) {
      // 从列表中删除图片
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;

      // 如果有图片URL，则清除图片
      if (this.newData.img && this.newData.img === file.url) {
        this.newData.img = "";
      }

      return true;
    },
    submitFile() {
      const query = {
        multipartFile: this.file,
      };
      this.$axios
        .post("/government-platform-center/common/uploadFile", query, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          this.$message.success("上传成功");
          this.newData.archiveUrl = response.data.data;
        });
    },
    downloadData(record) {
      this.$axios
        .get(
          "government-platform-center/archiveManagement/getDoc?id=" + record.id
        )
        .then((res) => {
          if (res.data.msg == "success") {
            this.$message.success("借阅成功");
            // window.open(res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    upData(record) {
      this.$axios
        .get(
          "government-platform-center/archiveManagement/backDoc?id=" + record.id
        )
        .then((res) => {
          if (res.data.msg == "success") {
            this.$message.success("归还成功");
            window.open(res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    deleteData(record) {
      var parmas = {
        id: record.id,
      };
      this.$axios
        .post(
          "government-platform-center/archiveManagement/deleteById",
          parmas,
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          if (res.data.msg == "success") {
            this.$message.success("删除成功");
            this.getList();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    lookData(record) {
      this.vis1 = true;
      this.oldData = record;
    },
  },
};
</script>
<style scoped>
.ant-row1 {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/.ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/.ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

.file-upload-btn {
  background-color: #007bff;
  /* 背景颜色 */
  color: white;
  /* 文本颜色 */
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}
</style>
